<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useBillStore } from "@/stores/rent-fees/billStore";

// 获取路由参数
const route = useRoute();
const billNumber = route.params.billNumber;

// 获取账单仓库
const billStore = useBillStore();
const bills = computed(() => billStore.billsData);

const router = useRouter();

// 存储单个账单数据
const bill = ref({
  billNumber: "",
  month: "",
  rentFee: 0,
  energyFee: 0,
  totalFee: 0,
  dueDate: "",
  leasePeriod: "",
  paymentStatus: "",
  paymentMethod: "",
  lateFee: 0,
  billType: "",
});

const handleExit = () => {
  router.push("/financial/rent-fees");
};

// 支付操作
const handlePayment = (method) => {
  alert(`正在使用${method}支付，支付金额：¥${bill.value.totalFee}`);
};

// 获取匹配的账单数据
onMounted(() => {
  const selectedBill = bills.value.find(
    (item) => item.billNumber === billNumber
  );
  if (selectedBill) {
    bill.value = { ...selectedBill };
  }
});
</script>

<template>
  <div class="bill-details">
    <!-- 账单信息合并 -->
    <section class="section bill-info">
      <div class="section-header">
        <h1>账单详情</h1>
      </div>
      <el-divider />
      <div class="billing-info">
        <p><strong>租赁期:</strong> {{ bill.leasePeriod }}</p>
        <p><strong>总费用:</strong> ¥{{ bill.totalFee }}</p>
        <p><strong>滞纳金:</strong> ¥{{ bill.lateFee }}</p>
        <p><strong>租金费用:</strong> ¥{{ bill.rentFee }}</p>
        <p><strong>能耗费用:</strong> ¥{{ bill.energyFee }}</p>
        <p><strong>账单编号:</strong> {{ bill.billNumber }}</p>
        <p><strong>账单周期:</strong> {{ bill.month }}</p>
        <p><strong>账单类型:</strong> {{ bill.billType }}</p>
        <p><strong>支付时间:</strong> 2024年8月28日</p>
        <p><strong>支付状态:</strong> {{ bill.paymentStatus }}</p>
        <p><strong>支付方式:</strong> {{ bill.paymentMethod }}</p>
        <p><strong>付款截止日期:</strong> {{ bill.dueDate }}</p>
      </div>

      <!-- 账单备注 -->
      <el-divider />
      <div class="bill-notes-info">
        <p>
          <strong>备注:</strong>
        </p>
      </div>

      <!-- 操作按钮 -->
      <el-divider />
      <div class="action-buttons">
        <el-button type="primary" @click="handlePayment('支付宝')">
          支付宝支付
        </el-button>
        <el-button type="success" @click="handlePayment('微信支付')">
          微信支付
        </el-button>
        <el-button type="warning" @click="handlePayment('银行转账')">
          银行转账
        </el-button>
        <el-button type="info" @click="handleExit">退出</el-button>
      </div>
    </section>
  </div>
</template>

<style scoped lang="scss">
.bill-details {
  padding: 20px;
  background-color: #f5f7fa;
}

.section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

h1,
h2 {
  font-size: 20px;
  color: #303133;
}

.billing-info p,
.detailed-info p,
.payment-record-info p,
.bill-notes-info p {
  font-size: 1rem;
  color: #333;
}

.el-divider {
  margin: 10px 0;
}

strong {
  font-weight: bold;

  /* 操作按钮部分 */
  .action-buttons {
    display: flex;
    gap: 15px; /* 按钮之间的间距 */
    justify-content: space-between; /* 按钮均匀分布 */
    margin-top: 15px;
  }

  .action-buttons el-button {
    flex: 1 1 120px; /* 按钮占据相同空间，最小宽度 120px */
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px; /* 按钮圆角 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .el-button:hover {
    background-color: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 鼠标悬停效果 */
  }
}
</style>
